<template>
	<view>
		<!-- 商品详情轮播 -->
		<swiper indicator-dots autoplay circular :interval="3000" :duration="1000" indicator-active-color="#41a863">
			<swiper-item v-for="(item,i) in goodsDetailSwiper" :key='i'>
				<image :src="item" mode="aspectFill" @click="preView(i)"></image>
			</swiper-item>
		</swiper>
		<!-- 商品基本信息 -->
		<view class="goodsBaseInfo" v-for="item in goodsBaseInfo" :key='item.id'>
			<view class="PLR MT">
				<text class="sell_price">￥{{item.sell_price}}</text>
				<text class="market_price">￥{{item.market_price}}</text>
				<view class="PTB">{{item.title}}</view>
			</view>
			<view class="PLR goodsSumNumber">
				<view>货号：{{item.goods_no}}</view>
				<view>库存：{{item.stock_quantity}}</view>
			</view>
		</view>
		<!-- 商品详细信息 -->
		<view class="goodsDetailInfo">
			<view class="PL detailInfoTitle">详细介绍</view>
			<view v-for="item in goodsDetailInfo" :key='item.title'>
				<view class="PLR MTB">{{item.title}}</view>
				<rich-text :nodes="item.content"></rich-text>
			</view>
		</view>
		<!-- 商品底部导航 -->
		<uniGoodsNav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
</template>

<script>
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	export default {
		data() {
			return {
				// 商品详情轮播数据
				goodsDetailSwiper: [
					'https://www.wahaotu.com/uploads/allimg/202102/1613797314676105.jpg',
					'https://www.wahaotu.com/uploads/allimg/202102/1613794479181839.jpg',
					'https://www.wahaotu.com/uploads/allimg/202011/1605952393916380.jpg'
				],
				// 商品基本信息
				goodsBaseInfo: [],
				// 商品详情数据
				goodsDetailInfo: [],
				// 底部商品导航控制
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		components: {
			uniGoodsNav
		},
		methods: {
			preView(i) {
				uni.previewImage({
					current: i,
					urls: this.goodsDetailSwiper
				})
			},
			reqGoodsInfo(url, id) {
				return this.$myRequest({
					url: url + id
				});
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			}
		},
		async onLoad({
			id
		}) {
			const {
				data
			} = await this.reqGoodsInfo('/api/goods/getinfo/', id);
			this.goodsBaseInfo = data.message;
			const value = await this.reqGoodsInfo('/api/goods/getdesc/', id);
			this.goodsDetailInfo = value.data.message;
		}
	}
</script>

<style scoped lang="scss">
	.goodsBaseInfo {
		.goodsSumNumber {
			border-top: 10rpx solid $themeColor;
			border-bottom: 10rpx solid $themeColor;

			view {
				margin: 16rpx 0;
			}
		}
	}

	.goodsDetailInfo {
		padding-bottom: 100rpx;
		.detailInfoTitle {
			font-size: 36rpx;
			margin-top: 16rpx;
			padding-bottom: 8rpx;
			border-bottom: 2rpx solid #eee;
		}
	}
</style>
